{% from "sidebar.njk" import sidebar %}
{% from "popover.njk" import popover %}

{% set footer %}
{% set trigger %}
<img src="https://github.com/hunvreus.png" class="rounded-lg shrink-0 size-8">
<div class="grid flex-1 text-left text-sm leading-tight">
  <span class="truncate font-medium">Ronan Berder</span>
  <span class="truncate text-xs">@hunvreus</span>
</div>
{% lucide "chevrons-up-down" %}
{% endset %}
{% call popover(
  trigger=trigger,
  trigger_attrs={
    "class": "btn-ghost p-2 h-12 w-full flex items-center justify-start",
    "data-keep-mobile-sidebar-open": ""
  },
  popover_attrs={
    "data-side": "top",
    "class": "w-[271px] md:w-[239px]"
  }
) %}
<div class="grid gap-4">
  <header class="grid gap-1.5">
    <h2 class="font-semibold">I hope you like Basecoat...</h2>
    <p class="text-muted-foreground text-sm">My name is <a href="https://ronanberder.com" target="_blank">Ronan</a> and I made this (and <a class="underline underline-offset-4" href="https://pagescms.org" target="_target">other things</a>). If you find it useful, please consider sponsoring me on GitHub or following me on X.</p>
  </header>
  <footer class="grid gap-2">
    <a href="https://github.com/sponsors/hunvreus" class="btn-sm" target="_blank">Sponsor me on GitHub</a>
    <a href="https://x.com/hunvreus" class="btn-sm-outline" target="_blank">Follow me on X</a>
  </footer>
</div>
{% endcall %}
{% endset %}

{% set header %}
<a href="/" class="btn-ghost p-2 h-12 w-full justify-start">
  <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="h-4 w-4"><rect width="256" height="256" fill="none"></rect><line x1="208" y1="128" x2="128" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line><line x1="192" y1="40" x2="40" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line></svg>
  </div>
  <div class="grid flex-1 text-left text-sm leading-tight">
    <span class="truncate font-medium">Basecoat</span>
    <span class="truncate text-xs">v{{ pkg.version }}</span>
  </div>
</a>

{# <div class="flex flex-col gap-2 px-2 text-sm">
  <form class="form relative">
    <label for="search" class="sr-only">Search</label>
    <input type="text" placeholder="Search the docs..." class="h-8 w-full shadow-none pl-8">
    {% lucide "search", { "class": "pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" } %}
  </form>
</div> #}
{% endset %}

{% set link_attrs = {
  "hx-boost": "true",
  "hx-select": "#content",
  "hx-target": "#content",
  "hx-swap": "outerHTML"
} %}

{% set new_link_attrs = {
  "hx-boost": "true",
  "hx-select": "#content",
  "hx-target": "#content",
  "hx-swap": "outerHTML",
  "data-new-link": "true"
} %}

{% set icon_home %}{% lucide "house" %}{% endset %}
{% set icon_info %}{% lucide "info" %}{% endset %}
{% set icon_square_terminal %}{% lucide "square-terminal" %}{% endset %}
{% set icon_layout_dashboard %}{% lucide "layout-dashboard" %}{% endset %}
{% set icon_github %}<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>{% endset %}
{% set icon_discord %}<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>{% endset %}
{% set icon_github %}<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>{% endset %}
{% set icon_discord %}<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>{% endset %}

{% set menu = [
  { type: "group", label: "Getting started", items: [
    { label: "Introduction", url: "/introduction", icon: icon_info, attrs: link_attrs },
    { label: "Installation", url: "/installation", icon: icon_square_terminal, attrs: link_attrs },
    { label: "Kitchen sink", url: "/kitchen-sink", icon: icon_layout_dashboard, attrs: link_attrs },
    { label: "GitHub", url: "https://github.com/hunvreus/basecoat", icon: icon_github, attrs: { "target": "_blank" } },
    { label: "Discord", url: "https://basecoatui.com/chat", icon: icon_discord, attrs: { "target": "_blank" } }
  ]},
  { type: 'group', label: 'Components', items: [
    { label: "Accordion", url: "/components/accordion", attrs: link_attrs },
    { label: "Alert", url: "/components/alert", attrs: link_attrs },
    { label: "Alert Dialog", url: "/components/alert-dialog", attrs: link_attrs },
    { label: "Avatar", url: "/components/avatar", attrs: link_attrs },
    { label: "Badge", url: "/components/badge", attrs: link_attrs },
    { label: "Breadcrumb", url: "/components/breadcrumb", attrs: link_attrs },
    { label: "Button", url: "/components/button", attrs: link_attrs },
    { label: "Button Group", url: "/components/button-group", attrs: new_link_attrs },
    { label: "Card", url: "/components/card", attrs: link_attrs },
    { label: "Checkbox", url: "/components/checkbox", attrs: link_attrs },
    { label: "Command", url: "/components/command", attrs: new_link_attrs },
    { label: "Combobox", url: "/components/combobox", attrs: link_attrs },
    { label: "Dialog", url: "/components/dialog", attrs: link_attrs },
    { label: "Dropdown Menu", url: "/components/dropdown-menu", attrs: link_attrs },
    { label: "Empty", url: "/components/empty", attrs: new_link_attrs },
    { label: "Field", url: "/components/field", attrs: new_link_attrs },
    { label: "Form", url: "/components/form", attrs: link_attrs },
    { label: "Input", url: "/components/input", attrs: link_attrs },
    { label: "Input Group", url: "/components/input-group", attrs: new_link_attrs },
    { label: "Item", url: "/components/item", attrs: new_link_attrs },
    { label: "Kbd", url: "/components/kbd", attrs: new_link_attrs },
    { label: "Label", url: "/components/label", attrs: link_attrs },
    { label: "Pagination", url: "/components/pagination", attrs: link_attrs },
    { label: "Popover", url: "/components/popover", attrs: link_attrs },
    { label: "Progress", url: "/components/progress", attrs: new_link_attrs },
    { label: "Radio Group", url: "/components/radio-group", attrs: link_attrs },
    { label: "Select", url: "/components/select", attrs: link_attrs },
    { label: "Sidebar", url: "/components/sidebar", attrs: link_attrs },
    { label: "Skeleton", url: "/components/skeleton", attrs: link_attrs },
    { label: "Slider", url: "/components/slider", attrs: link_attrs },
    { label: "Spinner", url: "/components/spinner", attrs: new_link_attrs },
    { label: "Switch", url: "/components/switch", attrs: link_attrs },
    { label: "Table", url: "/components/table", attrs: link_attrs },
    { label: "Tabs", url: "/components/tabs", attrs: link_attrs },
    { label: "Textarea", url: "/components/textarea", attrs: link_attrs },
    { label: "Theme Switcher", url: "/components/theme-switcher", attrs: link_attrs },
    { label: "Toast", url: "/components/toast", attrs: link_attrs },
    { label: "Tooltip", url: "/components/tooltip", attrs: link_attrs }
  ]}
] %}


{{ sidebar(
  id="sidebar",
  label="Sidebar navigation",
  header=header,
  footer=footer,
  content_attrs={ "class": "scrollbar [&_[data-new-link]::after]:content-['New'] [&_[data-new-link]::after]:ml-auto [&_[data-new-link]::after]:text-xs [&_[data-new-link]::after]:font-medium [&_[data-new-link]::after]:bg-sidebar-primary [&_[data-new-link]::after]:text-sidebar-primary-foreground [&_[data-new-link]::after]:px-2 [&_[data-new-link]::after]:py-0.5 [&_[data-new-link]::after]:rounded-md" },
  menu=menu
) }}